<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<html>
<head>
<link rel="stylesheet" media="all" type="text/css"	href="<c:url value="/resources/css/styles.css" />">

<link rel="stylesheet" media="all" type="text/css"
	href="<c:url value="/resources/css/vis.css" />">


<script type="text/javascript"
	src='<c:url value="/resources/js/vis.js" />'></script>

<script type="text/javascript"
	src='<c:url value="/resources/js/jquery-1.11.1.min.js" />'></script>
	<script type="text/javascript"
	src='<c:url value="/resources/js/jquery.ad-gallery.js" />'></script>

<meta charset="utf-8">
<title>Travel Journal</title>
 <style type="text/css">
    .vis.timeline.root {
      border: 2px solid purple;
      font-family:  purisa, 'comic sans', cursive;
      font-size: 12pt;
      background: #ffecea;
    }

    .vis.timeline .item {
      border-color: #F991A3;
      background-color: pink;
      font-size: 15pt;
      color: purple;
      box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
    }

    .vis.timeline .item,
    .vis.timeline .item.line {
      border-width: 3px;
    }

    .vis.timeline .item.dot {
      border-width: 10px;
      border-radius: 10px;
    }

    .vis.timeline .item.selected {
      border-color: green;
      background-color: lightgreen;
    }

    .vis.timeline .timeaxis .text {
      color: purple;
      padding-top: 10px;
      padding-left: 10px;
    }

    .vis.timeline .timeaxis .text.major {
      font-weight: bold;
    }

    .vis.timeline .timeaxis .grid.minor {
      border-width: 2px;
      border-color: pink;
    }

    .vis.timeline .timeaxis .grid.major {
      border-width: 2px;
      border-color: #F991A3;
    }
  </style>
</head>
<body>
	<div class="header">
		<div class="topnav">
			<ul id="nav">
				<li><a href="/TravelJournal/">Log Out</a></li>
			</ul>
		</div>
	</div>


	<div id="content">
		<div id="sidebar">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="/TravelJournal/records/myrecords">My Records</a></li>
				<li><a href="/TravelJournal/records/addrecord">Add Record</a></li>
				<li><a href="/TravelJournal/records/map">My Travel Map</a></li>
			</ul>
		</div>

		<div class="main-content">
					
			<div id="userName" style="display: none;">${user.userName ? user.userName : username}</div>
			<h2>Welcome ${user.userName ? user.userName : username}, to Travel Journal!</h2>
		
			<div id="visualization"></div>

			<script type="text/javascript">		 
			  var username = document.getElementById('userName').innerHTML;
			  var container = document.getElementById('visualization');
			  var items = new vis.DataSet();
				  
			  $(document).ready(
						function() {
							$.getJSON('/TravelJournal/records/'+username+'/list', {
								ajax : 'true'
							}, function(data) {
								var len = data.length;
								for (var i = 0; i < len; i++) {						
									 var startDate = data[i].startDate != null ? data[i].startDate : data[i].date;
									 var endDate = data[i].endDate;
									 
									 if(startDate == endDate || endDate == null)
									 	items.add({start: new Date(startDate), content:'<div><a href="/TravelJournal/records/updaterecord/'+data[i].id+'">' + data[i].country.name + ' - ' + data[i].city.name +'</div><img src="/TravelJournal/resources/images/icon.png" style="width:32px; height:32px;">'});
									 else
										items.add({start: new Date(startDate), end: new Date(endDate), content:'<div><a href="/TravelJournal/records/updaterecord/'+data[i].id+'">' + data[i].country.name + ' - ' + data[i].city.name +'</div>'});
								}

							});
						});
			
			  var options = {
			    editable: false,
			    margin: {
			      item: 20,
			      axis: 40
			    }
			  };
			
			  var timeline = new vis.Timeline(container, items, options);
			</script>


		</div>

		<div class="clear"></div>
	</div>
</body>
</html>
